<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓颉智能对联生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'STKaiti', serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.92);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 40px;
            margin-top: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #e74c3c, #3498db, #2ecc71);
            border-radius: 20px 20px 0 0;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        h1 {
            font-size: 2.8rem;
            color: #2c3e50;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #e74c3c, #3498db);
            border-radius: 2px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .input-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        label {
            font-size: 1.2rem;
            color: #2c3e50;
            font-weight: bold;
        }
        
        textarea {
            width: 100%;
            min-height: 100px;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1.4rem;
            font-family: inherit;
            resize: none;
            transition: all 0.3s ease;
        }
        
        textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        button {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 14px 25px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .result-section {
            margin-top: 30px;
            display: none;
        }
        
        .couplet-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            margin: 30px 0;
        }
        
        .couplet {
            background: #f8f9fa;
            border: 2px dashed #3498db;
            border-radius: 15px;
            padding: 25px 40px;
            text-align: center;
            position: relative;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .couplet-title {
            position: absolute;
            top: -15px;
            left: 20px;
            background: #3498db;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .couplet-content {
            font-size: 2rem;
            font-weight: bold;
            color: #2c3e50;
            letter-spacing: 8px;
            line-height: 1.8;
        }
        
        .cangjie-analysis {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 10px;
        }
        
        .character-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            width: 70px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .character-card:hover {
            transform: translateY(-5px);
        }
        
        .character {
            font-size: 2.2rem;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 10px;
        }
        
        .cangjie-code {
            font-size: 0.9rem;
            color: #3498db;
            font-weight: bold;
            background: #f0f7ff;
            padding: 3px 8px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .explanation {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 15px;
            border-left: 4px solid #3498db;
        }
        
        .explanation h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .explanation p {
            color: #555;
            line-height: 1.8;
        }
        
        .footer {
            margin-top: 40px;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 25px 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .couplet-content {
                font-size: 1.6rem;
                letter-spacing: 5px;
            }
            
            .character-card {
                width: 60px;
                padding: 10px;
            }
            
            .character {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>仓颉智能对联生成器</h1>
            <p class="subtitle">基于仓颉造字理念的智能对联系统，结合汉字结构与传统文化，为您创作工整优美的对联</p>
        </header>
        
        <div class="input-section">
            <div class="input-group">
                <label for="upper-couplet">请输入上联：</label>
                <textarea id="upper-couplet" placeholder="例如：春风送暖花千树">春风送暖花千树</textarea>
            </div>
            
            <button id="generate-btn">生成智能下联</button>
        </div>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>正在运用仓颉智慧创作下联...</p>
        </div>
        
        <div class="result-section" id="result-section">
            <div class="couplet-container">
                <div class="couplet">
                    <div class="couplet-title">上联</div>
                    <div class="couplet-content" id="upper-result">春风送暖花千树</div>
                    <div class="cangjie-analysis" id="upper-analysis">
                        <!-- 上联仓颉分析将由JS生成 -->
                    </div>
                </div>
                
                <div class="couplet">
                    <div class="couplet-title">下联</div>
                    <div class="couplet-content" id="lower-result">夜雨连明草一城</div>
                    <div class="cangjie-analysis" id="lower-analysis">
                        <!-- 下联仓颉分析将由JS生成 -->
                    </div>
                </div>
            </div>
            
            <div class="explanation">
                <h3>仓颉智慧解读</h3>
                <p id="explanation-text">上联"春风送暖花千树"描绘了春天生机盎然的景象，下联"夜雨连明草一城"则展现了雨后万物生长的画面。从仓颉结构来看，"春"字由"日"和"屯"组成，象征阳光与生长；"夜"字包含"夕"与"亦"，表现夜晚意境。上下联在结构上形成完美对仗，平仄相谐，意境相融。</p>
            </div>
        </div>
        
        <div class="footer">
            <p>仓颉智能对联系统 · 弘扬中华传统文化 · 传承汉字智慧</p>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const upperInput = document.getElementById('upper-couplet');
            const generateBtn = document.getElementById('generate-btn');
            const resultSection = document.getElementById('result-section');
            const loadingElement = document.getElementById('loading');
            const upperResult = document.getElementById('upper-result');
            const lowerResult = document.getElementById('lower-result');
            const upperAnalysis = document.getElementById('upper-analysis');
            const lowerAnalysis = document.getElementById('lower-analysis');
            const explanationText = document.getElementById('explanation-text');
            
            // 仓颉字根数据库
            const cangjieDict = {
                "春": "手大日",
                "风": "竹弓中",
                "送": "卜大竹水",
                "暖": "日一月水",
                "花": "廿人心",
                "千": "竹十",
                "树": "木土戈",
                "夜": "卜人弓大",
                "雨": "一中月卜",
                "连": "卜十田十",
                "明": "日月",
                "草": "廿日十",
                "一": "一",
                "城": "土戈竹一",
                "秋": "竹木火",
                "月": "月",
                "喜": "土口廿口",
                "满": "水廿中月",
                "堂": "火月口土",
                "福": "戈火一口田",
                "寿": "手弓水",
                "山": "山",
                "水": "水",
                "秀": "竹木弓竹尸",
                "年": "人手",
                "新": "卜木竹一中"
            };
            
            // 对联数据库
            const coupletsDB = {
                "春风送暖花千树": "夜雨连明草一城",
                "青山不墨千秋画": "绿水无弦万古琴",
                "福如东海长流水": "寿比南山不老松",
                "红梅含苞傲冬雪": "绿柳吐絮迎新春",
                "春满人间欢歌阵阵": "福临门第喜气洋洋",
                "春雨丝丝润万物": "红梅点点绣千山",
                "一帆风顺年年好": "万事如意步步高",
                "百年天地回元气": "一统山河际太平"
            };
            
            // 解释文本数据库
            const explanationsDB = {
                "春风送暖花千树": "上联描绘春天生机盎然的景象，下联展现雨后万物生长的画面。从仓颉结构看，'春'字由'手大日'组成，象征阳光与生长；'夜'字包含'卜人弓大'，表现夜晚意境。",
                "青山不墨千秋画": "上联以青山为画卷，下联以绿水为琴弦。仓颉结构中'山'字简洁有力，'水'字流畅自然，形成完美对仗。",
                "福如东海长流水": "上联福气如东海，下联寿比南山。'福'字结构复杂象征福气深厚，'寿'字结构稳重寓意长寿。",
                "红梅含苞傲冬雪": "上联红梅傲雪，下联绿柳迎春。'梅'字含'木'字根与植物相关，'柳'字同样包含'木'字根，体现自然主题。",
                "春满人间欢歌阵阵": "上联春满人间，下联福临门第。'春'字与'福'字在结构上形成呼应，展现节庆喜悦。",
                "春雨丝丝润万物": "上联春雨润物，下联红梅绣山。'雨'字与'梅'字在仓颉结构中都包含自然元素，意境相融。",
                "一帆风顺年年好": "上联一帆风顺，下联万事如意。'帆'字含'巾'字根与船相关，'事'字结构复杂象征万事万物。",
                "百年天地回元气": "上联天地回元气，下联山河际太平。'天'字结构开阔，'山'字稳重，体现家国情怀。"
            };
            
            // 生成仓颉分析卡片
            function createCangjieCards(text, container) {
                container.innerHTML = '';
                for (let char of text) {
                    const card = document.createElement('div');
                    card.className = 'character-card';
                    
                    const charDiv = document.createElement('div');
                    charDiv.className = 'character';
                    charDiv.textContent = char;
                    
                    const codeDiv = document.createElement('div');
                    codeDiv.className = 'cangjie-code';
                    codeDiv.textContent = cangjieDict[char] || '未知字根';
                    
                    card.appendChild(charDiv);
                    card.appendChild(codeDiv);
                    container.appendChild(card);
                }
            }
            
            // 生成对联
            function generateCouplet() {
                const upper = upperInput.value.trim();
                if (!upper) {
                    alert('请输入上联内容');
                    return;
                }
                
                // 显示加载状态
                loadingElement.style.display = 'block';
                resultSection.style.display = 'none';
                
                // 模拟处理时间
                setTimeout(() => {
                    let lower;
                    
                    // 检查是否在数据库中
                    if (coupletsDB[upper]) {
                        lower = coupletsDB[upper];
                    } else {
                        // 生成新下联（简化版）
                        const genericResponses = [
                            "瑞气盈门福万家",
                            "喜气临门福满堂",
                            "绿柳展枝舞新春",
                            "吉星高照福临门",
                            "祥云缭绕福满堂"
                        ];
                        lower = genericResponses[Math.floor(Math.random() * genericResponses.length)];
                    }
                    
                    // 更新结果
                    upperResult.textContent = upper;
                    lowerResult.textContent = lower;
                    
                    // 生成仓颉分析
                    createCangjieCards(upper, upperAnalysis);
                    createCangjieCards(lower, lowerAnalysis);
                    
                    // 设置解释文本
                    explanationText.textContent = explanationsDB[upper] || 
                        `上联"${upper}"意境优美，下联"${lower}"与之完美呼应。从仓颉结构看，每个字的字根组合都体现了汉字造字的智慧，整体对仗工整，平仄协调，展现了中华传统文化的深厚底蕴。`;
                    
                    // 显示结果
                    loadingElement.style.display = 'none';
                    resultSection.style.display = 'block';
                    
                    // 滚动到结果区域
                    resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 1500);
            }
            
            // 初始化页面
            function initPage() {
                createCangjieCards(upperInput.value, upperAnalysis);
                createCangjieCards(coupletsDB[upperInput.value], lowerAnalysis);
            }
            
            // 事件监听
            generateBtn.addEventListener('click', generateCouplet);
            
            // 初始化页面
            initPage();
        });
    </script>
</body>
</html>